<template>
    <div>
        <div class="category-banner banner">
            <h1 class="banner-title">更新文章</h1>
        </div>

        <el-card class="main-card" style="margin-top: 330px">

            <el-form :model="form" label-width="120px" ref="form">
                <el-form-item label="类别" prop="title">

                    <el-select v-model="form.category" placeholder="请选择文章类别"
                    >
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标签" style="font-weight: bold">
                    <el-input v-model="form.tag" style="width: 195px"></el-input>
                </el-form-item>
                <el-form-item label="是否公开" style="font-weight: bold">
                    <el-switch v-model="form.flag" active-color="#13ce66" inactive-color="#ccc"
                               @change="changeEnable(form.flag)"></el-switch>
                </el-form-item>
                <el-form-item label="封面"  style="font-weight: bold">
                    <el-upload
                            ref="upload"
                            :action="'/blog/files/upload'"
                            :on-success="filesUploadSuccess"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>

                    </el-upload>
                </el-form-item>


                <div class="article-title-container">
                    <el-input
                            v-model="form.title"
                            size="medium"
                            placeholder="输入文章标题"
                    />
                    <el-button
                            type="danger"
                            size="medium"
                            class="save-btn"
                            @click="cancel"
                    >
                        返回
                    </el-button>
                    <el-button
                            type="primary"
                            size="medium"
                            @click="update"
                            style="margin-left:10px "

                    >
                        更新文章
                    </el-button>
                </div>
                <div>
                    <mavon-editor
                            v-model="form.content"
                            ref="md"
                            @change="change"
                            @imgAdd="$imgAdd"
                            @imgDel="$imgDel"
                            style="min-height: 600px;z-index: 0"
                    />

                    <button @click="submit"></button>
                </div>

            </el-form>
        </el-card>
    </div>
</template>


<script>
    import {mavonEditor} from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    import request from '../../utils/request'
    import {serverIp} from "../../utils/config";
    let str
    export default {
        // 注册
        components: {
            mavonEditor,
        },
        data() {
            return {
                serverIp:serverIp,
                options: [{
                    value: '面试',
                    label: '面试'
                }, {
                    value: '数据库',
                    label: '数据库'
                }, {
                    value: '安全',
                    label: '安全'
                }, {
                    value: '学习笔记',
                    label: '学习笔记'
                }, {
                    value: '大数据',
                    label: '大数据'
                },
                    {
                        value: '前端',
                        label: '前端'
                    },
                    {
                        value: '架构',
                        label: '架构'
                    },
                    {
                        value: 'java',
                        label: 'java'
                    },
                    {
                        value: '日常',
                        label: '日常'
                    },
                    {
                        value: '心得',
                        label: '心得'
                    },
                    {
                        value: '问答',
                        label: '问答'
                    },
                    {
                        value: '其他',
                        label: '其他'
                    }],
                value: '',
                form: {
                    content: '',
                    title: '',
                    category: '',
                    img: '',

                },
                article: {},

                content: '', // 输入的markdown
                html: '',    // 及时转的html
                forms: {},
            }
        },

        created() {
            str = sessionStorage.getItem("user")
            this.forms = JSON.parse(str)
            let id = this.$route.query
            request.get('/article/query/' + id.id).then(data => {
                this.form=data.data

            })
        },
        methods: {
            changeEnable(row) {
              console.log(row)

                this.form.flag = row
                // console.log(row)
            },
            $imgAdd(pos, $file){
                // 将图片上传到服务器.
                var formdata = new FormData();
                formdata.append('image', $file);
                request({
                    url: '/upload11/uploadFile',
                    method: 'post',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data' },
                }).then((flag) => {

                    console.log(flag)
                    //在插入图片处添加图片所在的url
                    this.$refs.md.$img2Url(pos, flag.data);
                })
            },

            $imgDel(pos) {
                delete this.img_file[pos];
            },
            cancel(){
                this.$router.go(-1)

            },
            update() {
                if (!str) {
                    this.$toast({type: 'warnning', message: '请登录后再操作'})
                    return
                }

                if (this.form.content === '') {
                    this.$toast({type: 'warnning', message: '请输入内容'})
                    return
                }

                if (this.form.category === '') {
                    this.$toast({type: 'warnning', message: '请选择文章类别'})
                    return
                }
                if (this.form.title === '') {
                    this.$toast({type: 'warnning', message: '请输入标题'})
                    return
                }
                this.form.author = this.forms.username
                this.form.nick = this.forms.nick
                request.put("/article/updateArticle", this.form).then(res => {
                    if (res.code === 20000) {
                        this.$toast({type: 'success', message: '更新成功'})
                        this.$router.go(-1);
                    } else {
                        this.$toast({type: 'success', message: res.msg})
                    }

                })

            },

            filesUploadSuccess(res) {

                this.form.img = res.data
            },
            // 所有操作都会被解析重新渲染
            change(value, render) {
                // render 为 markdown 解析后的结果[html]
                this.html = render;
            },
            // 提交
            submit() {
                console.log(this.content);
                console.log(this.html);
            }
        },
        mounted() {

        }
    }
</script>
<style scoped>
    .category-banner {
        background: url(https://static.talkxj.com/config/9034edddec5b8e8542c2e61b0da1c1da.jpg) center center / cover no-repeat;
        background-color: #49b1f5;
    }

    .article-title-container {
        display: flex;
        align-items: center;
        margin-bottom: 1.25rem;
        margin-top: 2.25rem;
    }

    .save-btn {
        margin-left: 0.75rem;
        background: #fff;
        color: #f56c6c;
    }
</style>

